<template>
	<div class="left">
		<form @submit.prevent="submitHandle">
			<div>
				用户名
			</div>
			<div>
				<input type="text" v-model="leftFormData.username" />
			</div>
			<div>
				评论
			</div>
			<div>
				<input type="text" v-model="leftFormData.comment" />
			</div>
			<div>
				<button type="submit">提交</button>
			</div>
		</form>
	</div>
</template>
<script type="text/javascript">
	export default {
		props: ['comments'],
		data () {
			return {
				leftFormData: {
					username: "",
					comment: ""
				}
			}
		},
		methods: {
			submitHandle: function() {
				if (this.leftFormData.username.length == 0) {
					alert("用户名不能空");
					return false;
				}

				if (this.leftFormData.comment.length == 0) {
					alert("评论不能为空");
					return false;
				}

				// 触发事件
				this.$emit('addComment', {name: this.leftFormData.username, text: this.leftFormData.comment});

				//this.comments.push({name: this.leftFormData.username, text: this.leftFormData.comment});

				alert("评论添加成功");
			}
		}
	}
</script>
<style type="text/css">
	.left{
		height: 600px;
		width: 200px;
	}
</style>